<?php echo $header; ?>
<style>
.center{
	padding: 10px 0 !important;
	vertical-align:center;
}
#blue:hover td {
    color: #000000;
}
#blue td {
    color: #D3D3D3;
}
.list tbody tr:hover td {
    background-color: #FFFFCB;
}
</style>
<?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>
  <div class="box">
    <div class="heading">
      <h1><img src="catalog/view/theme/default/image/customer.png" alt="" height="30" width="30" style="margin-right:10px"/>Cây thành viên</h1>
    </div>
	
    <div class="content">
	<div>
		<table class="list info-hide-tree">
          <thead>
            <tr>
			  <td class="center">Mã thành viên</td> 
              <td class="center">Họ tên</td>  
			  <td class="center">Điện thoại</td>
			  <td class="center">Địa chỉ</td>
			  <td class="center">Ngày sinh</td>
			  <td class="center">Email</td>
			  <td class="center">Tiền đóng lần 1</td>
			  <td class="center">Tiền đóng lần 2</td>
            </tr>
          </thead>
		  
         <tbody>		
		  <tr id="info-add">
			  
		  </tr>
         </tbody>
        </table>
	</div>
		<div id="tree">
		<?php if(!empty($customers)){ ?>
		  <ul class="hover">			
			<?php foreach ($customers as $customer) { ?>
			<li class="hover" id="tree_<?php echo $customer['customer_id']; ?>" onclick="GetChildCustomer('<?php echo $customer['customer_id'];?>');">
				<img width="20px" height="20px" src="catalog/view/theme/default/image/plus.png" style="margin-left:-20px;"/>
				<div class="tree_header" ><?php echo $customer['madn']; ?></div>
			</li>
			<div id="list-add-<?php echo $customer['customer_id']; ?>"></div>
			<?php } ?>
		  </ul>
		<?php } ?>
		</div>
	</div>
     
    </div>
  </div>
  <?php echo $content_bottom; ?></div>
<script type="text/javascript"><!--
function Close1(){
	$('#cus_detail').slideUp();
}
$(document).ready(function(){

	});
function GetChildCustomer(id){
	var cus_id = id;
	var cusid="";
	var htmlHide="";
	var html ='';
	var bool_res = $('li#tree_'+cus_id).hasClass('opened');
	$.ajax({
		url:  'index.php?route=account/tree/GetCustomer',
		type: 'post',
		data: 'user_nhan=' + cus_id,
		dataType: 'json',			
		success: function(json) {
			if(json['error']){
				alert(json['error']);
			}
			if(json['success']){
				htmlHide += '<td class="center">'+json['success']['madn']+'</td>';
				htmlHide += '<td class="center">'+json['success']['name']+'</td>';
				htmlHide += '<td class="center">'+json['success']['telephone']+'</td>';
				htmlHide += '<td class="center">'+json['success']['address']+'</td>'; 
				htmlHide += '<td class="center">'+json['success']['born']+'</td>';
				htmlHide += '<td class="center">'+json['success']['email']+'</td>';
				htmlHide += '<td class="center">'+json['success']['price']+'</td>';
				htmlHide += '<td class="center">'+json['success']['price2']+'</td>';
				$('#info-add').html(htmlHide);
				$('.info-hide-tree').show();
			}
			
			
		}
	});
	if(!bool_res){
		$.ajax({
			url:  'index.php?route=account/tree/getChildCustomersTree',
			type: 'post',
			data: 'cus_id=' + cus_id,
			dataType: 'json',		
			success: function(json) {
				if(json['error']){
					alert(json['error']);
				}
				var madn="";
				if(json['success']){
				html+='<ul id="ul-'+cus_id+'" class="hover">';
				  $.each(json['success'], function(key,value) {
									
					  $.each(this, function(key, value) {
						
						if(key=='madn'){
							madn = value;
						}else if(key=='customer_id'){
							cusid = value;
							html += '<li class="hover" id="tree_'+value+'" onclick="GetChildCustomer('+value+')">';
							html += '<img width="20px" height="20px" src="catalog/view/theme/default/image/plus.png" style="margin-left:-20px;margin-bottom: -6px;"/>';
							html += madn+'</li>';

						}
						
						html += '<div id="list-add-'+cusid+'"></div>';
					 });
					
					});   
					html+='</ul>';
					//$('li#tree_'+cus_id).append(html);
					$('#list-add-'+cus_id).append(html);
				}	
			}
		});
		$('li#tree_'+cus_id).addClass('opened');
		
	}else{
		if($('#ul-'+cus_id).hasClass('reopen')){
			$('#ul-'+cus_id).removeClass('info-hide');
			$('#ul-'+cus_id).removeClass('reopen');
		}
		else{
		$('#ul-'+cus_id).addClass('info-hide');
		$('#ul-'+cus_id).addClass('reopen');
		}
	}
}
//--></script>

<?php echo $footer; ?> 